<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery.min.js"></script>
    <style>
        .siblings *
        {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>
<!--
同胞拥有相同的父元素。
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

兄弟节点
有许多有用的方法让我们在 DOM 树进行水平遍历：
    siblings()
    next()
    nextAll()
    nextUntil()
    prev()
    prevAll()
    prevUntil()
-->


<div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>


<script>

    $(function () {
        // $('h2').siblings().css({"color": "red", "border": "2px solid red"})
        // $('h2').next().css({"color": "red", "border": "2px solid red"})
        // $('h2').nextAll().css({"color": "red", "border": "2px solid red"})
        // $('h2'). prev().css({"color": "red", "border": "2px solid red"})
        $('h2'). prevAll().css({"color": "red", "border": "2px solid red"})
    })

</script>

</body>
</html>